<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 在线快捷 证件照打印 </title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<style>
			.ip-row {
				margin-top: 40px;
				margin-bottom: 40px;
			}
			
			.ip-p {
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
	<div th:insert="~{front/head :: header}"></div>
	<div id="ctxPath" th:src="@{/}"></div>
		<!--主体-->
		<div class="layui-container">
			<!--商品购买-->
			<div class="layui-row ip-row">
				<div class="layui-col-md5">
					<img th:src="@{/img/id.png}" />
				</div>
				<div class="layui-col-md7">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>证件照快印 - 1寸/2寸/3寸/其他证件照</legend>
					</fieldset>
					<form class="layui-form" th:action="@{/order/upload }" th:method="post" id="fo">
						<!--打印份数-->
						<div class="layui-form-item">
							<label class="layui-form-label">打印版数</label>
							<div class="layui-input-inline">
								<input name="count" required lay-verify="required|count" value="1" autocomplete="off" class="layui-input">
								<input name="title" value="idphoto" type="hidden">
							</div>
						</div>
						<!--纸张尺寸-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">纸张尺寸</label>
								<div class="layui-input-inline">
									<select name="pageSize">
										<option value="小1寸" >小1寸</option>
										<option value="1寸" >1寸</option>
										<option value="小2寸" >小2寸</option>
										<option value="2寸" >2寸</option>
										<option value="3寸" >3寸</option>
										<option value="二代身份证">二代身份证</option>
									</select>
								</div>
							</div>
						</div>
						<!--有无边距-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">有无边距</label>
								<div class="layui-input-inline">
									<select name="margin">
										<option value="有边距" price="0">有边距</option>
										<option value="无边距" price="0.1">无边距</option>
									</select>
								</div>
							</div>
						</div>
						<!--是否换底色-->
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">换底色</label>
								<div class="layui-input-inline">
									<select name="changeBgc">
										<option value="不换底色" >不换色</option>
										<option value="换红底" >红底色</option>
										<option value="换蓝底" >蓝底色</option>
										<option value="换白底" >白底色</option>
									</select>
								</div>
							</div>
						</div>
						<!---->
						<blockquote class="layui-elem-quote">
							<p style="font-size: xx-large;color: red;" id="final">￥0.1元</p>
						</blockquote>
						<!--提交-->
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn-lg layui-btn-danger " lay-submit="" lay-filter="put">立即提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="layui-row ip-row">
				<img th:src="@{/img/idimg.png}" style="width: 100%;">
			</div>
			<!--商品-->
			<div class="layui-row ip-row">
				<div class="layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">商品详情</li>
						<li>打印指导</li>
					</ul>
					<div class="layui-tab-content">
						<!--详情信息-->
						<div class="layui-tab-item layui-show">
							<!--价格信息-->
							<div layui-row ip-row>
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>证件照概述</legend>
								</fieldset>
								<table class="layui-table">
									<colgroup>
										<col width="20%">
										<col width="80%">
									</colgroup>
									<tbody>
										<tr>
											<td>尺寸</td>
											<td>1寸/2寸</td>
										</tr>
										<tr>
											<td>类型</td>
											<td>证件照</td>
										</tr>
										<tr>
											<td>相纸</td>
											<td>富士晶彩光面</td>
										</tr>
										<tr>
											<td>表面</td>
											<td>光面</td>
										</tr>
										<tr>
											<td>工艺</td>
											<td>换底包括：白底/红底/蓝底(工艺另收费)</td>
										</tr>
										<tr>
											<td>照片排版</td>
											<td>1寸一版8小张/2寸一版4小张(需要割的可以留言)</td>
										</tr>
										<tr>
											<td rowspan="3">拍摄提示</td>
											<td>拍肩膀以上即可</td>
										</tr>
										<tr>
											<td>五官清晰可见</td>
										</tr>
										<tr>
											<td>背景纯色或者白墙都可</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div layui-row >
								<!--打印单价-->
								<fieldset class="layui-elem-field layui-field-title">
									<legend>尺寸及价格说明</legend>
								</fieldset>
								<table class="layui-table">
									<colgroup>
										<col width="20%">
										<col width="20%">
										<col width="20%">
										<col width="20%">
										<col width="20%">
									</colgroup>
									<thead>
										<tr>
											<th>照片尺寸</th>
											<th>照片规格(单位：厘米)</th>
											<th>建议像素</th>
											<th>打印价格(元/版)</th>
											<th>换底色价格(元/版)</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1寸</td>
											<td>2.5*3.5</td>
											<td>1500*1050</td>
											<td>8.00</td>
											<td>5.00</td>
										</tr>
										<tr>
											<td>2寸</td>
											<td>3.5*5.0</td>
											<td>1800*1200</td>
											<td>8.00</td>
											<td>5.00</td>
										</tr>
									</tbody>
								</table>
							</div>
							<!--提示信息-->
							<div class=" layui-row ip-row ">
								<fieldset class="layui-elem-field small ">
									<legend>
										<span class="layui-badge-dot "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot layui-bg-green "></span> 温馨提示
										<span class="layui-badge-dot layui-bg-green "></span>
										<span class="layui-badge-dot layui-bg-orange "></span>
										<span class="layui-badge-dot "></span>
									</legend>
									<div class="layui-field-box ">
										<p>1、平台实行明码标价，将成本以及利润降到最低，将打印质量和真诚的服务回馈给客户；</p>
										<p>2、我们会在打印完成前后认真检查，但由于订单数目多，难免出现其他情况，当您收到订单后出现质量，数量配送时间等问题，请及时联系客户；</p>
										<p>3、照片目前只支持JPG/JPEG/PNG格式，如果格式不符合请您转换后再进行上传；</p>
									</div>
								</fieldset>
							</div>
						</div>
						<!--打印指导-->
						<div class="layui-tab-item">
							<div class="layui-row">
								<fieldset class="layui-elem-field small ">
									<legend>
										<p style="font-size: xx-large;color: red;">打印指导</p>
									</legend>
									<div class="layui-field-box ">
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-orange"></span> 拍肩膀以上即可，五官一定要清晰，背景最好能选择白墙或者纯色，这样方便我们后期调整，保证打印质量。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot"></span> 下单前，请确认好照片像素尺寸、张数以及价格，确认好打印参数。对打印的照片有特殊要求的请留言备注，如果忘记留言可在线沟通客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-green"></span> 一切打印资料给予保密处理，文件打印文笔立即删除，如需要再打印源文件请重新上传并下单，不便之处请谅解。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-cyan"></span> 爱打印在线打印平台，专注于校园云打印，承诺普通文档打印，3小时内送达，如超出时间，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-blue"></span> 配送时间说明：晚上8点之前完成付款的订单，正常当晚10点前送达(如遇校区关门等特殊情况，配送人员会电话联系)，晚8点之后的订单，正常是第二天10：30分之前送达。如遇特殊急件，请联系客服。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-black"></span> 如订单配送至指定位置的，订单状态是已配送的状态。
										</p>
										<p class="ip-p">
											<span class="layui-badge-dot layui-bg-gray"></span> 取件之后请及时检查文件，如有任何问题，都可以与客服联系，我们希望您拿到的都是满意的，爱打印时刻为您提供贴心便捷的打印服务。
										</p>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--js-->
		<script type="text/javascript " th:src="@{/layui/layui.js }"></script>
		<script type="text/javascript ">
			layui.use('element', function() {
				var element = layui.element; 
			});
		</script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$;
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				//自定义验证规则
				form.verify({
					count: [/^(?!0)(?:[0-9]{1,3}|1000)$/,'数量必须在1到1000以内的数字']
				});
				//监听提交
				 form.on('submit(put)', function(data) {
					 var isLogin = false;
					 $.ajax({
							cache:true,
							type:"GET",
							url: ctxPath+"isLogin",
							async: false,
							success: function(data) {
								if(data == "yes") {
									isLogin = true;
								} else if(data == "no"){
									layer.msg("您还没有登陆,正在为您跳转到登陆页面！");
									setTimeout(function(){
										location.href=ctxPath+"login";
									},2000);
								}else{
									layer.msg("未知错误，请联系管理员！");
								}
							}
						});
					 return isLogin;
				});
				
				
			});
		</script>
	</body>

</html>